<template>
  <div class="cover-container">
    <el-carousel :interval="10000" arrow="always" indicator-position="none" :autoplay="false">
      <el-carousel-item v-for="item in imgList" :key="item.key">
        <div class="img-area">
          <div class="cover-content">
            <div class="the-title">
              <img :src="item.url" alt="">
            </div>
            <div class="the-word">
              <div class="word-area">
                <p>{{ item.word }}</p>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-button
      type="text"
      size="medium"
      class="login-btn"
      @click="goToLogin"
    >登录系统<i
      class="el-icon-arrow-right el-icon--right"
    /></el-button>
  </div>
</template>

<script>
export default {
  name: 'Cover',
  data() {
    return {
      imgList: [
        {
          key: 1,
          url: 'https://img.speschool.com/speschool/word_2.png?v=3',
          word: '健全人可以活出精彩的人生，残疾人也可以活出精彩的人生。',
          name: '—— 习近平 2016.07.28'
        },
        {
          key: 2,
          url: 'https://img.speschool.com/speschool/word_1.png?v=3',
          word: '各级政府要高度重视，带着深厚的感情，履职尽责，特教特办，认真实施好特殊教育提升计划，让残疾孩子与其他所有人一样，同在蓝天下，共同接受良好的教育。',
          name: '—— 李克强 2014.01.27'
        }
      ]
    }
  },
  methods: {
    goToLogin() {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #fff;
.cover-container {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  .el-carousel {
    height: 100%;
    & ::v-deep .el-carousel__container {
      height: 100%;
      & .el-carousel__item {
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url(https://img.speschool.com/speschool/cover_bg.jpg?v=2);
        .img-area {
          width: 100%;
          height: 100%;
          position: relative;
          .cover-content {
            position: absolute;
            z-index: 20;
            width: 50%;
            .the-title {
              width: 80%;
              margin-bottom: 50px;
              img {
                width: 100%;
              }
            }
            .the-word {
              width: 100%;
              font-family: "KaiTi";
              color: #fff;
              font-size: 30px;
              display: flex;
              p {
                text-indent: 2em;
                line-height: 45px;
                letter-spacing: 5px;
                &:last-child {
                  text-align: right;
                }
              }
              img {
                width: 300px;
              }
            }
          }
        }
        &:first-of-type .img-area {
          .cover-content {
            top: 10%;
            left: 5%;
            .the-word {
              width: 80%;
            }
          }
          &:after {
            content: "";
            display: block;
            width: 100%;
            height: 200%;
            position: absolute;
            z-index: 10;
            background: #222;
            opacity: 0.7;
            top: -40%;
            left: -50%;
            transform: rotate(15deg);
          }
          &:before {
            content: "";
            display: block;
            width: 3%;
            height: 200%;
            position: absolute;
            z-index: 10;
            background: #222;
            opacity: 0.7;
            top: -40%;
            left: 53%;
            transform: rotate(15deg);
          }
        }
        &:last-of-type .img-area {
          .cover-content {
            left: 50%;
            top: 5%;
            .the-word {
              width: 90%;
            }
          }
          &:after {
            content: "";
            display: block;
            width: 100%;
            height: 200%;
            position: absolute;
            z-index: 10;
            background: #4f3739;
            opacity: 0.7;
            top: -40%;
            left: 46%;
            transform: rotate(345deg);
          }
          &:before {
            content: "";
            display: block;
            width: 3%;
            height: 200%;
            position: absolute;
            z-index: 10;
            background: #4f3739;
            opacity: 0.7;
            top: -40%;
            left: 40%;
            transform: rotate(345deg);
          }
        }
      }
    }
  }
}
.login-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 20;
  font-size: 28px;
  color: #fff;
  font-family: "KaiTi";
  padding: 10px 30px;
}
@media screen and (max-width: 1280px) {
  .cover-container .el-carousel ::v-deep .el-carousel__item {
    & .the-word .word-area {
      font-size: 26px;
    }
  }
}
@media screen and (min-width: 1280px) {
  .cover-container .el-carousel ::v-deep .el-carousel__item {
    & .the-word .word-area {
      font-size: 26px;
    }
  }
}
</style>
